<template>
  <div class="wa-card">
    <div class="wa-search-bar">
      <el-dropdown split-button type="primary" :disabled="selectRows.length===0">
        批量
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>重置昵称</el-dropdown-item>
            <el-dropdown-item>重置昵称</el-dropdown-item>
            <el-dropdown-item>恢复/禁用</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button type="success" class="wa-ml5"><i class="fa fa-plus wa-mr5"></i>新增用户</el-button>
      <div class="wa-fr">
        <el-input
            style="width: 400px"
            placeholder="用户名/邮箱"
            clearable
            :prefix-icon="Search"
        />
        <el-button class="wa-ml5" type="primary" :icon="Search">搜索</el-button>
      </div>
    </div>

    <el-table :data="data.data" style="width: 100%" @selection-change="selectionChangeHandler">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="ID" width="50"/>
      <el-table-column prop="avatar" label="头像" width="80">
        <template #default="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120"/>
      <el-table-column prop="nickname" label="昵称" width="120"/>
      <el-table-column prop="email" label="邮箱" width="200"/>
      <el-table-column prop="vip" label="会员" width="120">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.vip">超级会员</el-tag>
          <el-tag type="primary" v-else>普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       label="状态"
                       :filters="[
        { text: '正常', value: 1 },
        { text: '禁用', value: 0 },
      ]"
                       width="120">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="容量" width="400">
        <template #default="scope">
          <el-progress :percentage="Math.floor(scope.row.used*100 / scope.row.total)"/>
          <el-text>{{ convertCapacity(scope.row.used) }} / {{ convertCapacity(scope.row.total) }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="balance" sortable label="积分" width="120"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small">重置昵称</el-button>
          <el-button type="primary" size="small">重置头像</el-button>
          <el-button :type="scope.row.status?'warning':'success'" size="small">{{
              scope.row.status ? '禁用' : '恢复'
            }}
          </el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; height: 30px;">
      <el-pagination class="wa-fr" layout="prev, pager, next, jumper,total,sizes" hide-on-single-page background small
                     :total="data.total"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {getUsers} from "@/api/weisite/user";
import {convertCapacity} from "@/utils/size";
import {Search} from "@element-plus/icons-vue";

const data = reactive({
  data: [],
  total: 0
})

const selectRows = ref([])

const selectionChangeHandler = (selection) => {
  selectRows.value = selection
}


onMounted(() => {
  getUsers().then(res => {
    data.data = res.data.data.data
    data.total = res.data.data.total
  })
})
</script>

<style lang="less" scoped>
.wa-search-bar {
  margin-bottom: 20px;
}
</style>